<template>
	<div class="left">
		<el-scrollbar>
			<div class="menu-switch" @click="switchBtn()"><i class="el-icon-more"></i></div>
			<el-menu :default-active="active" background-color="#393d49" text-color="#fff" active-text-color="#fff" :router="true" :collapse="isCollapse" :unique-opened="true">
				<template v-for="(data, index) in navs">
					<el-menu-item :index="index.toString()" :route="{ path: data.path }" v-if="data.path">
						<i :class="data.icon"></i>
						<span slot="title">{{ data.title }}</span>
					</el-menu-item>
					<el-submenu :index="index.toString()" v-else-if="data.subNav">
						<template slot="title">
							<i class="iconfont" :class="data.icon"></i>
							<span>{{ data.title }}</span>
						</template>
						<el-menu-item :index="index + '-' + sIndex" v-for="(item, sIndex) in data.subNav" :route="item.path" :key="sIndex">
							<i class="iconfont" :class="item.icon"></i>
							{{ item.title }}
						</el-menu-item>
					</el-submenu>
				</template>
			</el-menu>
			<a href="javascript:;" @click="logoutBtn()" class="logout">
				<i class="iconfont icon-Group-"></i>
				退出登陆
			</a>
		</el-scrollbar>
	</div>
</template>

<script>
export default {
	data() {
		return {
			active: '0',
			isCollapse: JSON.parse(sessionStorage.getItem('small')),
			navs: [],
			menuList: []
		};
	},
	watch: {},
	methods: {
		//开关导航
		switchBtn() {
			this.isCollapse = !this.isCollapse;
			if (this.isCollapse) {
				this.$emit('change', true);
			} else {
				this.$emit('change', false);
			}
		},
		// 移动端退出登陆
		logoutBtn() {
			this.$confirm('是否退出当前账号?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$layer.msg('退出成功');
					setTimeout(() => {
						this.$router.replace({ path: '/' });
					}, 1500);
				})
				.catch(() => {
					// 取消
				});
		},
		lockNav() {
			let path = this.$route.path;
			if (path.indexOf('-') >= 0) {
				this.active = path.substr(1);
				return;
			}
			this.navs.forEach((item, index) => {
				if (item.path && path == item.path) {
					this.active = index.toString();
				} else if (!item.path) {
					if (item.subNav) {
						item.subNav.forEach((data, sIndex) => {
							if (path == data.path) {
								this.active = index.toString() + '-' + sIndex.toString();
								console.log(this.active);
							}
						});
					}
				}
			});
		}
	},
	created() {
		let power = []
		let menu = window.JSON.parse(localStorage.getItem('menu'));
		menu.forEach((a, i) => {
			let nav = {
				icon: a.icon,
				path: '',
				title: a.title,
				subNav: []
			};
			a.lower.forEach((b, i2) => {
				let subNav = {
					icon: b.icon,
					path: b.link,
					title: b.title
				};
				if(b.power != undefined){
					power.push(b)
				}
				nav.subNav.push(subNav);
			});
			this.menuList.push(nav);
		});
		//console.log(power)
		localStorage.setItem('power', window.JSON.stringify(power));
		this.navs = this.menuList;
		/* console.log('this.menuList',this.menuList);
		console.log('menu',menu); */
	},
	mounted() {
		this.lockNav();
	}
};
</script>
<style>
.el-menu-item.is-active {
	color: #fff;
	span {
		color: #fff !important;
	}
}
.el-menu .el-submenu__title .iconfont {
	color: #fff;
}
</style>
